<!DOCTYPE html>
<html np-app="sortApp">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>Sortable--Multi</title>
    <meta name="keywords" content="sortable, reorder, list, javascript, html5, drag and drop, dnd, animation, groups, angular, ng-sortable, react, mixin, effects, rubaxa"/>
    <meta name="description" content="Sortable - is a minimalist JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery. Supports Meteor, AngularJS, React and any CSS library, e.g. Bootstrap."/>
    <meta name="viewport" content="width=device-width, initial-scale=0.5"/>
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
    <link href="css/multi.css" rel="stylesheet" type="text/css"/>
    <script src="js/angular.min.js" type="text/javascript"></script>
    <script src="js/Sortable.js" type="text/javascript"></script>
    <script src="js/ng-sortable.js" type="text/javascript"></script>
    <script src="js/multi.js" type="text/javascript"></script>
</head>
<body style="overflow-x: hidden">
    <div style="position: relative" ng-controller="sortController">
        <div id="multiply" >
             <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="tile">
                        <div class="tile__name">
                            <span style="margin-left:20px; font-size:14px;">数据中心资源</span>
                            <ul class="pull-right list-inline" style="margin-right:10px;">
                                <li><i class="glyphicon glyphicon-plus" title="添加" ng-click="add()"></i></li>
                                <li><i class="glyphicon glyphicon-edit" title="编辑" ng-class="edit()"></i></li>
                                <li><i class="glyphicon glyphicon-trash" title="关闭" ng-click="close()"></i></li>
                            </ul>
                        </div>
                        <div class="tile__list">
                            <div class="tile_list_item text-center">
                                <i class="js-remove pull-right">x</i>
                                <h3>数据中心</h3>
                                <img src="st/datacenter.png" />
                            </div>
                            <div class="tile_list_item text-center">
                                <i class="js-remove pull-right">x</i>
                                <h3>机房</h3>
                                <img src="st/datacenter.png" />
                            </div>
                            <div class="tile_list_item text-center">
                                <i class="js-remove pull-right">x</i>
                                <h3>机柜</h3>
                                <img src="st/datacenter.png" />
                            </div>
                            <div class="tile_list_item text-center">
                                <i class="js-remove pull-right">x</i>
                                <h3>带宽</h3>
                                <img src="st/datacenter.png" />
                            </div>
                            <div class="tile_list_item text-center" >
                                <i class="js-remove pull-right">x</i>
                                <h3>硬件</h3>
                                <img src="st/datacenter.png" />
                            </div>
                            <div class="tile_list_item text-center">
                                <i class="js-remove pull-right">x</i>
                                <h3>服务器</h3>
                                <img src="st/datacenter.png" />
                            </div>
                        </div>
                    </div>
                </div>
             </div>
             <div class="row">
                 <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                     <div class="layer tile">
                         <div class="tile__name">
                             <span style="margin-left:20px; font-size:14px;">IPAM资源</span>
                             <ul class="pull-right list-inline" style="margin-right:10px;">
                                 <li><i class="glyphicon glyphicon-plus" title="添加" ng-click="add()"></i></li>
                                 <li><i class="glyphicon glyphicon-edit" title="编辑" ng-class="edit()"></i></li>
                                 <li><i class="glyphicon glyphicon-trash" title="关闭" ng-click="close()"></i></li>
                             </ul>
                         </div>
                         <div class="tile__list">
                             <div class="tile_list_item text-center">
                                 <i class="js-remove pull-right">x</i>
                                 <h3>IP</h3>
                                 <img src="st/datacenter.png" />
                             </div>
                             <div class="tile_list_item text-center">
                                 <i class="js-remove pull-right">x</i>
                                 <h3>域名</h3>
                                 <img src="st/datacenter.png" />
                             </div>
                         </div>
                     </div>
                 </div>
                 <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                     <div class="layer tile">
                         <div class="tile__name">
                             <span style="margin-left:20px; font-size:14px;">业务资源</span>
                             <ul class="pull-right list-inline" style="margin-right:10px;">
                                 <li><i class="glyphicon glyphicon-plus" title="添加" ng-click="add()"></i></li>
                                 <li><i class="glyphicon glyphicon-edit" title="编辑" ng-class="edit()"></i></li>
                                 <li><i class="glyphicon glyphicon-trash" title="关闭" ng-click="close()"></i></li>
                             </ul>
                         </div>
                         <div class="tile__list">
                             <div class="tile_list_item text-center">
                                 <i class="js-remove pull-right">x</i>
                                 <h3>业务模块</h3>
                                 <img src="st/datacenter.png" />
                             </div>
                         </div>
                     </div>
                 </div>
                 <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                     <div class="layer tile">
                         <div class="tile__name">
                             <span style="margin-left:20px; font-size:14px;">虚拟化资源</span>
                             <ul class="pull-right list-inline" style="margin-right:10px;">
                                 <li><i class="glyphicon glyphicon-plus" title="添加" ng-click="add()"></i></li>
                                 <li><i class="glyphicon glyphicon-edit" title="编辑" ng-class="edit()"></i></li>
                                 <li><i class="glyphicon glyphicon-trash" title="关闭" ng-click="close()"></i></li>
                             </ul>
                         </div>
                         <div class="tile__list">
                             <div class="tile_list_item text-center">
                                 <i class="js-remove pull-right">x</i>
                                 <h3>Vcenter</h3>
                                 <img src="st/datacenter.png" />
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
             <div class="row">
                  <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                      <div class="tile">
                          <div class="tile__name">
                              <span style="margin-left:20px; font-size:14px;">云资源</span>
                              <ul class="pull-right list-inline" style="margin-right:10px;">
                                  <li><i class="glyphicon glyphicon-plus" title="添加" ng-click="add()"></i></li>
                                  <li><i class="glyphicon glyphicon-edit" title="编辑" ng-class="edit()"></i></li>
                                  <li><i class="glyphicon glyphicon-trash" title="关闭" ng-click="close()"></i></li>
                              </ul>
                          </div>
                          <div class="tile__list">
                              <div class="tile_list_item text-center">
                                  <i class="js-remove pull-right">x</i>
                                  <h3>阿里云</h3>
                                  <img src="st/datacenter.png" />
                              </div>
                              <div class="tile_list_item text-center">
                                  <i class="js-remove pull-right">x</i>
                                  <h3>AWS</h3>
                                  <img src="st/datacenter.png" />
                              </div>
                          </div>
                      </div>
                  </div>
                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                      <div class="tile">
                          <div class="tile__name"><span style="margin-left:20px; font-size:14px;">供应商资源</span>
                              <ul class="pull-right list-inline" style="margin-right:10px;">
                                  <li><i class="glyphicon glyphicon-plus" title="添加" ng-click="add()"></i></li>
                                  <li><i class="glyphicon glyphicon-edit" title="编辑" ng-class="edit()"></i></li>
                                  <li><i class="glyphicon glyphicon-trash" title="关闭" ng-click="close()"></i></li>
                              </ul>
                          </div>
                          <div class="tile__list">
                              <div class="tile_list_item text-center">
                                  <i class="js-remove pull-right">x</i>
                                  <h3>供应商</h3>
                                  <img src="st/datacenter.png" />
                              </div>
                              <div class="tile_list_item text-center">
                                  <i class="js-remove pull-right">x</i>
                                  <h3>合同</h3>
                                  <img src="st/datacenter.png" />
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
        </div>
        <div style="position: absolute; right: 0;top:15px;" ng-hide="showResource">
            <div id="add">
                <div style="width:300px;height:940px; background-color: #F9F9F9;border: 1px solid #ececec;" >
                    <div ng-click="close()">&times;</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>